{extend name="layout_container" /}

{block name="main"}
<el-row>
    <el-col :span="24">
        <el-page-header @back="goBack" content="{$pageTitle?:'编辑'}"
                        style="margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eaeefb">
        </el-page-header>
    </el-col>
</el-row>

<div id="base-form">
    <el-form ref="form" :model="form" size="mini" label-width="80px">
        <el-form-item label="模板名称">
            <el-input v-model="form.name" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
            <el-switch v-model="form.enable" :active-value=1 :inactive-value=2></el-switch>
        </el-form-item>
        <el-form-item label="计价方式">
            <el-radio-group v-model="form.type">
                <el-radio :label="v" v-for="(k, v) in type">{{k}}</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="详细设置">

            <el-popover
                    placement="right"
                    width="400"
                    trigger="click">
                <el-cascader
                        v-model="regionAdd"
                        :options="regions.options"
                        :props="regions.props"
                        collapse-tags
                        :show-all-levels="false"
                        ref="addFreightElm"
                        clearable></el-cascader>
                <el-button type="primary" size="mini" @click="addFreight">确定</el-button>
                <el-button slot="reference" size="mini">增加</el-button>
            </el-popover>

            <el-table
                    :data="form.area_conf"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="region_ids"
                        label="地区">
                    <template slot-scope="scope">
                        <el-cascader
                                v-model="scope.row.region_ids"
                                :options="regions.options"
                                :props="regions.props"
                                collapse-tags
                                :show-all-levels="false"
                                clearable></el-cascader>
                    </template>
                </el-table-column>
                <el-table-column :label="`首重/${unit}`">
                    <template slot-scope="scope">
                        <el-input type="number" v-model="scope.row.first"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="首费(元)">
                    <template slot-scope="scope">
                        <el-input type="number" v-model="scope.row.first_money"></el-input>
                    </template>
                </el-table-column>

                <el-table-column :label="`续重/${unit}`">
                    <template slot-scope="scope">
                        <el-input type="number" v-model="scope.row.renew"></el-input>
                    </template>
                </el-table-column>

                <el-table-column label="续费(元)">
                    <template slot-scope="scope">
                        <el-input type="number" v-model="scope.row.renew_money"></el-input>
                    </template>
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="delFreight(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>

        <el-form-item label="条件包邮">

            <el-popover
                    placement="right"
                    width="400"
                    trigger="click">
                <el-cascader
                        v-model="regionFreeAdd"
                        :options="regions.options"
                        :props="regions.props"
                        collapse-tags
                        :show-all-levels="false"
                        ref="addFreightElm"
                        clearable></el-cascader>
                <el-button type="primary" size="mini" @click="addFree">确定</el-button>
                <el-button slot="reference" size="mini">增加</el-button>
            </el-popover>

            <el-table
                    :data="form.area_special_conf"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="region_ids"
                        label="地区">
                    <template slot-scope="scope">
                        <el-cascader
                                v-model="scope.row.region_ids"
                                :options="regions.options"
                                :props="regions.props"
                                collapse-tags
                                :show-all-levels="false"
                                clearable></el-cascader>
                    </template>
                </el-table-column>
                <el-table-column :label="`包邮条件/${unit}`">
                    <template slot-scope="scope">
                        <el-input type="number" v-model="scope.row.num"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="delFree(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
    </el-form>
    <div style="text-align: center">
        <el-button type="primary" @click="save">保存</el-button>
    </div>
</div>

{/block}

{block name="style"}
{__block__}
<style>
    .el-table td, .el-table th {
        padding: 2px 0;
    }
</style>
{/block}
{block name="script"}

<script>
    new Vue({
        el: '#app',
        template: "#appCnt",
        data: function () {
            return {
                regionAdd: {},
                regionFreeAdd: {},
                regions: {
                    props: {multiple: true, checkStrictly: true},
                    options: [{
                        value: 1,
                        label: '东南',
                        children: [{
                            value: 2,
                            label: '上海',
                            children: [
                                {value: 3, label: '普陀'},
                                {value: 4, label: '黄埔'},
                                {value: 5, label: '徐汇'}
                            ]
                        }, {
                            value: 7,
                            label: '江苏',
                            children: [
                                {value: 8, label: '南京'},
                                {value: 9, label: '苏州'},
                                {value: 10, label: '无锡'}
                            ]
                        }, {
                            value: 12,
                            label: '浙江',
                            children: [
                                {value: 13, label: '杭州'},
                                {value: 14, label: '宁波'},
                                {value: 15, label: '嘉兴'}
                            ]
                        }]
                    }, {
                        value: 17,
                        label: '西北',
                        children: [{
                            value: 18,
                            label: '陕西',
                            children: [
                                {value: 19, label: '西安'},
                                {value: 20, label: '延安'}
                            ]
                        }, {
                            value: 21,
                            label: '新疆维吾尔族自治区',
                            children: [
                                {value: 22, label: '乌鲁木齐'},
                                {value: 23, label: '克拉玛依'}
                            ]
                        }]
                    }]
                },

                type: {$type|raw},
                typeUnit: {$typeUnit|raw},
                form: {$data|raw}
            }
        },
        computed: {
            unit: function () {
                return this.typeUnit[this.form.type];
            }
        },
        methods: {
            goBack: function () {
                window.location.href = document.referrer
            },
            handleChange(value) {
                // console.log(value);
            },
            addFreight: function () {
                this.form.area_conf.push({
                    inx: 1,
                    region_ids: this.regionAdd,
                    first: 1,
                    first_money: 10,
                    renew: 1,
                    renew_money: 10
                })
            },
            delFreight: function (scope) {
                this.form.area_conf.splice(scope.$index, 1)
            },
            addFree: function () {
                this.form.area_special_conf.push({
                    inx: 1,
                    region_ids: this.regionFreeAdd,
                    first: 1,
                    first_money: 10,
                    renew: 1,
                    renew_money: 10
                })
            },
            delFree: function (scope) {
                this.form.area_special_conf.splice(scope.$index, 1)
            },
            save() {
                $.post('', this.form,  (rs) => {
                    this.$message({
                        showClose: true,
                        message: rs.msg || (rs.code === 200 ? '操作成功' : '操作失败'),
                        type: rs.code === 200 ? 'success' : 'error'
                    });
                },'json')
            }
        },
        created: function () {
            this.form.area_conf = this.form.area_conf ? this.form.area_conf : []
            this.form.area_special_conf = this.form.area_special_conf ? this.form.area_special_conf : []
        }
    })
</script>
{/block}